<!doctype html>
<!--
    Copyright 2022 Google LLC

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        https://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-->
<div>
  <button id="test">Test Button</button>
  <form id="form1">
    <button id="form-button" type="submit">Form Button</button>
  </form>
  <div id="form1-result"></div>
  <form class="form2">
    <button><span id="span">Hello World</span></button>
  </form>
  <form>
    <div><span id="span2">Hello</span> World</div>
  </form>
  <label for="input">Input</label>
  <form><input id="input" /></form>
  <a id="shadow-root" role="link">Hello&nbsp;</a>
  <iframe id="iframe"></iframe>
  <button id="popup">Open Popup</button>
  <a href="main2.html">Page 2</a>
  <button id="synthetic">Trigger Synthetic Event</button>
  <button id="synthetic-handler">Synthetic Event Handler</button>
  <button id="selector-attribute" data-devtools-test="selector-attribute">
    Custom selector attribute
  </button>
  <button id="hover-button">Not hovered</button>
</div>
<script>
  window.buttonClicks = [];
  const testButton = document.getElementById('test');
  testButton.addEventListener('mouseup', (event) => {
    event.preventDefault();
    window.buttonClicks.push(event.button);
  });

  window.addEventListener('submit', (event) => {
    if (!event.target.classList.contains('submittable')) {
      event.preventDefault();
    }
  });
  const link = document.getElementById('shadow-root');
  const span1 = document.createElement('span');
  link.append(span1);
  const shadow = span1.attachShadow({ mode: 'open' });
  const span2 = document.createElement('span');
  span2.id = 'inner-span';
  span2.textContent = 'World';
  shadow.append(span2);

  const iframe = document.getElementById('iframe');
  const button = document.createElement('button');
  button.textContent = 'iframe button';
  button.id = 'in-iframe';
  iframe.contentDocument.body.append(button);

  const innerIframe = document.createElement('iframe');
  const innerIframeButton = document.createElement('button');
  innerIframeButton.textContent = 'Inner iframe button';
  innerIframeButton.id = 'inner-iframe';
  iframe.contentDocument.body.append(innerIframe);
  innerIframe.contentDocument.body.append(innerIframeButton);

  document.getElementById('popup').addEventListener('click', () => {
    window.open(
      'popup.html',
      'Window Name ' + new Date(),
      'resizable,scrollbars,status,width=200,height=200'
    );
  });

  document.getElementById('synthetic').addEventListener('click', () => {
    const handler = document.getElementById('synthetic-handler');
    handler.addEventListener('click', () => {
      console.log('synthetic event handled');
    });
    const event = new Event('click');
    handler.dispatchEvent(event);
  });

  document.getElementById('form1').addEventListener('submit', () => {
    document.getElementById('form1-result').textContent = 'From 1 Submitted';
  });

  document
    .getElementById('hover-button')
    .addEventListener('pointerover', (event) => {
      event.target.textContent = 'Hovered';
    });
</script>
